<template>
  <div class="hore-add">
    <h3>添加英雄</h3>
    <hr>
    <form class="form-horizontal" @submit.prevent="addHore()">
      <div class="form-group">
        <label class="col-sm-2 control-label">英雄名称</label>
        <div class="col-sm-10">
          <input v-model="horeForm.horeName" type="text" class="form-control" style="width:200px" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">英雄性别</label>
        <div class="col-sm-10">
          <input v-model="horeForm.gender" type="radio" value="男"> 男
          <input v-model="horeForm.gender" type="radio" value="女"> 女
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-primary">添加</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
// import axios from 'axios'
export default {
  data () {
    return {
      // 收集英雄表单数据
      horeForm: {
        horeName: '',
        gender: '男'
      }
    }
  },
  methods: {
    // 添加英雄
    addHore () {
      // 校验
      if (!this.horeForm.horeName.trim()) return alert('请输入英雄名称')
      // 发请求  后台需要三个数据  horeName gender time
      // 目前this.horeForm中只有两项数据，提交的时候需要合并一个time
      this.$http.post('/hore',{
        // 展开horeForm对象的两个属性到当前对象中
        ...this.horeForm,
        // 新建一个time属性
        time: new Date()  
      }).then(()=>{
        // 添加成功   去列表查看
        this.$router.push('/hore')
      })
    }
  }
}
</script>